<template>
  <view class="wrap" >
    <view class="back" @tap="back">
      <image
      :src="$imgUrl('/lt_back.png')" 
        mode="scaleToFill"
      />
    </view>
    <view class="content">
      <scroll-view scroll-y style="height: 75vh;">
        <view class="text-dashed">
          <view class="line"></view>
          <view class="view">若退出本页面将不保存历史记录</view>
        </view>
        <view class="list" v-for="(item, index) in list" :key="index">
          <view class="list_left list_item" v-if="item.type == 1">
            <image class="user" src="../../static/logo.jpg"></image>
			<view class="list_item_information"  v-if="item.img" >
				<image class="back_user"  mode="widthFix"  :src="item.img" @click="previewImage(item.img)"></image>
            </view>
            <view class="list_item_information"  v-else>
              <text>{{ item.text }}</text>
            </view>
          </view>
          <view class="list_right list_item"  v-else>
            <view class="list_item_information">
              <text>{{ item.text }}</text>
            </view>
            <!-- <image class="img"  :src="$imgUrl('/aaa.jpg')"  /> -->
			 <image class="user" :src="$imgUrl('/user.png')"  />
          </view>
        </view>
      </scroll-view>
	  <view class="type">
			<view class="type-title">选择作画风格</view>
			<view class="type-list">
				<view v-for="(item, index) in typeOptions" :key="index" @click="typeIndex = index">
					<view v-if="typeIndex == index" class="type-list-active">{{ item.label }}</view>
					<view v-else class="type-list-item">{{ item.label }}</view>
				</view>
			</view>
		</view>
     <view class="bottom">
        <view class="bottom_input">
          <u-input placeholder="请输入" color="#ffffff" disabledColor="#ffffff" border="none" v-model="text"/>
        </view>
        <view class="bottom_button"  @click="send"><button>发送</button></view>
     </view>
    </view>
  </view>
</template>

<script>
export default {
	data() {
		return {
			text: '',
			list: [
				//type 1 左 2右
				{ type: 1, img: '', text: '请输入作画的关键信息,本次将消耗30积分' }
			],
			typeIndex: 0,
			typeOptions: [
				{ label: '随机', value: '000' },
				{ label: '水墨画', value: '101' },
				{ label: '概念艺术', value: '102' },
				{ label: '油画', value: '103' },
				{ label: '水彩画', value: '104' },
				{ label: '像素画', value: '105' },
				{ label: '厚涂风格', value: '108' },
				{ label: '插图', value: '107' },
				{ label: '剪纸风格', value: '108' },
				{ label: '印象派', value: '109' },
				{ label: '古典肖像画', value: '111' },
				{ label: '黑白素描画', value: '112' },
				{ label: '赛博朋克', value: '113' },
				{ label: '科幻风格', value: '114' },
				{ label: '暗黑风格', value: '115' },
				{ label: '日系动漫', value: '201' },
				{ label: '唯美古风', value: '203' },
				{ label: '游戏卡通', value: '301' },
				{ label: '通用写实', value: '401' }
			]
		};
	},
	onLoad() {},
	methods: {
		/**
		 * 图片查看
		 */
		previewImage(url) {
			uni.previewImage({
				current: 0, // 当前显示图片的索引值
				urls: [url], // 需要预览的图片列表，photoList要求必须是数组
				loop: true // 是否可循环预览
			});
		},
		// 发送
		async send() {
			if (this.text) {
				this.showLoading('发送中');
				this.list.push({ type: 2, text: this.text });
				let res = await this.$http.post('/app/ai/aizh', { msg: this.text, type: this.typeOptions[this.typeIndex].value });
				this.toast('发送成功');
				if (res.tp.base64) {
					this.list.push({ type: 1, img: res.tp.base64 });
				}
				this.hideLoading();
			} else {
				this.toast('内容不能为空');
			}
		},
		back(){
			uni.navigateBack()
		}
	}
};
</script>


<style lang="scss" scoped>

@import './css/public.scss';


</style>
